<template>
    <div>
        <ALoading v-if="loading"></ALoading>
        <template v-else>
            <ul>
                <div class="timeStamp">
                    <span class="day">28
                        <em>9</em>
                    </span>
                    <span class="week">星期一</span>
                    <span class="record">今日打卡4次&nbsp;工时时长6.5小时</span>
                </div>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>18:29</strong>打卡时间</span>
                        <em class="commuterTime">(下班时间&nbsp;18:30)</em>
                        <em class="abnormal">早退</em>
                        <em class="outwork">外勤</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum sequi, assumenda harum omnis optio
                        ea asperiores est necessitatibus? Libero ab quo illum provident autem asperiores iusto dolores iure
                        aliquid sed.</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区万达Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, quod?</p>
                    <span class="correct">发送申请&nbsp;></span>
                    <span class=" correct ">更新打卡&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>14:01</strong>打卡时间</span>
                        <em class="commuterTime">(上班时间&nbsp;14:00)</em>
                        <em class="abnormal">迟到</em>
                        <em class="outwork">外勤</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <img src="http://owtz12sxf.bkt.clouddn.com/office1.jpg" alt="">
                    <div class="taskLink">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sale"></use>
                        </svg>
                        <p class="task">销售客户关联Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, impedit.</p>
                        <p class="title">客户：赛百味Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, dolor.</p>
                    </div>
                    <span class="correct">发起申请&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>12:01</strong>打卡时间</span>
                        <em class="commuterTime">(下班时间&nbsp;12:00)</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <span class="correct  none">申请补卡&nbsp;></span>
                    <span class=" correct  none">更新打卡&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>09:29</strong>打卡时间</span>
                        <em class="commuterTime">(上班时间&nbsp;09:30)</em>
                        <em class="abnormal none">迟到</em>
                    </div>

                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <span class="correct none">申请补卡&nbsp;></span>
                    <span class=" correct none">更新打卡&nbsp;></span>
                    <div class="dot"></div>
                </li>
            </ul>
            <ul>
                <div class="timeStamp">
                    <span class="day">25
                        <em>9</em>
                    </span>
                    <span class="week">星期五</span>
                    <span class="record">当日打卡4次&nbsp;工时时长6.5小时</span>
                </div>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>18:29</strong>打卡时间</span>
                        <em class="commuterTime">(下班时间&nbsp;18:30)</em>
                        <em class="abnormal">早退</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <span class="correct">发起申请&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>14:01</strong>打卡时间</span>
                        <em class="commuterTime">(上班时间&nbsp;14:00)</em>
                        <em class="abnormal">迟到</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <span class="correct">迟到申请·驳回&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong class="none">12:01</strong>未打卡</span>
                        <em class="commuterTime">(下班时间&nbsp;12:00)</em>
                        <em class="abnormal">缺卡</em>
                    </div>
                    <p class="companyAddress none">天瑞99商务大厦</p>
                    <p class="locationAddress none">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                        <!-- 只有缺卡的时候,文字为“申请补卡”,其他异常考勤,均为“发起申请” -->
                    <span class="correct">申请补卡&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>09:29</strong>打卡时间</span>
                        <em class="commuterTime">(上班时间&nbsp;09:30)</em>
                        <em class="abnormal none">迟到</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <span class="correct none">发起申请&nbsp;></span>
                    <div class="dot"></div>
                </li>
            </ul>
            <ul>
                <div class="timeStamp">
                    <span class="day">24
                        <em>9</em>
                    </span>
                    <span class="week">星期四</span>
                    <span class="record">当日打卡4次&nbsp;工时时长6.5小时</span>
                </div>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong><i>次日</i>01:17</strong>打卡时间</span>
                        <em class="commuterTime">(下班时间&nbsp;18:30)</em>
                        <em class="abnormal">迟到</em>
                    </div>
                    <p class="companyAddress">123天瑞999999999商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路23333333333333号</p>
                    <img src="http://owtz12sxf.bkt.clouddn.com/office.jpg" alt="">
                    <span class="correct">发起申请&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>13:50</strong>打卡时间</span>
                        <em class="commuterTime">(上班时间&nbsp;14:00)</em>
                        <em class="abnormal none">迟到</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <img src="http://owtz12sxf.bkt.clouddn.com/office.jpg" alt="">
                    <span class="correct reissue none">申请补卡&nbsp;></span>
                    <span class=" correct freshen none">更新打卡&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>11:50</strong>打卡时间</span>
                        <em class="commuterTime">(下班时间&nbsp;12:00)</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <span class="correct ">缺卡补卡·已通过 >&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>09:31</strong>打卡时间</span>
                        <em class="commuterTime">(下班时间&nbsp;09:30)</em>
                        <em class="abnormal">迟到</em>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <span class="state">迟到&nbsp;补卡审核中</span>
                    <div class="dot"></div>
                </li>
            </ul>
        </template>
        <pulldonwLoad v-show="upDrapLoad"></pulldonwLoad>
        
    </div>
</template>

<script>
import ALoading from "./_loading.vue";
import page404 from "./_page404.vue";
import pulldonwLoad from "./_pulldownLoading.vue";

export default {
  name: "attendance--overview",
  components: {
    ALoading,
    page404,
    pulldonwLoad
  },
  data() {
    return {
      loading: true
    };
  },
  props: ["upDrapLoad"],
  methods: {},
  mounted: function() {
    var self = this;
    setTimeout(function() {
      self.loading = false;
    }, 10);
  }
};
</script>
